<script lang="ts" setup>
import videojs from "video.js";
// 记得引用css文件！
import "video.js/dist/video-js.css";
const emit = defineEmits(["ready", "ended"]);
const props = defineProps({
  options: {
    type: [Object],
    default: () => ({}),
  },
});
const videoRef = ref(null);
const playerRef = ref<any>(null);
const { options } = props;
onMounted(() => {
  if (!playerRef.value) {
    const videoElement = videoRef.value;
    if (!videoElement) {
      return;
    }
    const player = (playerRef.value = videojs(videoElement, options, () => {
      console.log("播放器准备就绪！");
      emit("ready", player);
    }));
  }
});

onUnmounted(() => {
  const player = playerRef.value;
  if (player) {
    player.dispose();
    playerRef.value = null;
  }
});

const handleEnded = () => {
  emit("ended", 0);
};
const innerStyle = {
  width: "100%",
  height: "100%",
};
</script>
<template>
  <div data-vjs-player :style="innerStyle">
    <video
      ref="videoRef"
      class="video-js vjs-big-play-centered"
      @ended="handleEnded"
      :playsInline="true"
    />
  </div>
</template>
